/* Bingo MdxEditor CSS */
:root {
	--body-width: 1200px;
	--primary-color: #2381F5;
	--secondary-color: #2ecc71;
	--tip-text-color: #00b7d4;
	--tip-bg-color: #dce9ef;
	--note-text-color: #438afe;
	--note-bg-color: #dee4ed;
	--warn-text-color: #e68a00;
	--warn-bg-color: #ffe5cc;
	--error-text-color: #E9002F;
	--error-bg-color: #f6d5d5;
	--text-color: #000;
	--bg-color: #fff;
	--border-color: #e0e0e0;
	--shadow-color: rgba(0, 0, 0, 0.2);
	--text-shadow-min: 
		1px 1px 0 #ccc,
		2px 2px 1px var(--shadow-color);
	--text-shadow-max:
		1px 1px 0 #ccc,
		2px 2px 0 #999,
		3px 3px 5px var(--shadow-color);
	--box-shadow: 0 6px 16px var(--shadow-color);
	--border-radius: 12px;
	--font-size: 15px;
	--font-family: "DejaVu Sans Mono", "Microsoft YaHei", "Andale Mono", monospace;
}
/********** html, body ***********/
html,body {
    padding: 1em 0;
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--bg-color);
    font-size: var(--font-size);
    font-family: var(--font-family);
    word-break: break-word;
}
@media screen {
	body {
		max-width: var(--body-width);
		margin: 0 auto;
		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
		padding: 30px;
		border-radius: 20px;
	}
}
/********** 目录 ***********/
.toc {
	position: fixed;
	right: calc(50% - var(--body-width)/2);
	top: 20px;
	width: 110px;
	height: 60px;
    z-index: 10000;

	opacity: 0.4;
	background-color: var(--bg-color);
	overflow-y: auto;
	font-size: 0.9em;
	line-height: 2;
	white-space: nowrap;       /* 禁止换行 */
	overflow: hidden;          /* 隐藏溢出 */
	border-radius: 20px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.toc > ul:before {
	content: "目录";
	display: block;
	font-size: 1.4em;
	font-weight: bold;
	margin-bottom: 10px;
}
.toc:hover {
  opacity: 1;
  width: 350px;
  height: auto;
  transition: opacity 0.2s 0.1s;  /* 延迟出现 */
}
/********** 标题 ***********/
h1 {
	font-size: 2em;
	text-align: center;
	text-shadow:
		1px 1px 0 #ccc,
		2px 2px 0 #999,
		0 0 10px #555;
	position: relative;
	padding-bottom: 10px;
}
h1::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100px;
	height: 3px;
	background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
	border-radius: 3px;
}
h2 {
	font-size: 1.6em;
	margin: 20px 0 15px;
	padding: 5px 0;
	position: relative;
	border-bottom: 1px solid var(--shadow-color);
}
h2, h3, h4, h5, h6 {
	text-shadow: var(--text-shadow-max);
}
h3 {font-size: 1.4em;}
h4 {font-size: 1.3em;}
h5 {font-size: 1.2em;}
h6 {font-size: 1.1em;}

/********** 文本样式 ***********/
p strong {
	text-shadow: var(--text-shadow-min);
}
p ins {
	text-decoration: none;
	border-bottom: 2px solid var(--secondary-color);
}
p del {
	text-decoration: none;
	background-color: var(--error-bg-color);
	padding: 0.2em 0.4em;
	border-radius: 3px;
	position: relative;
}
p del::after {
  content: "";
  color: var(--error-text-color);
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: rotate(-5deg);
}

/********** 链接 ***********/
a {
	color: var(--primary-color);
	text-decoration: none;
	position: relative;
	transition: color 0.3s ease;
}

a::after {
	content: '';
	position: absolute;
	width: 100%;
	height: 2px;
	bottom: -2px;
	left: 0;
	background-color: var(--primary-color);
	transform: scaleX(0);
	transform-origin: bottom right;
	transition: transform 0.3s ease;
}

a:hover {
	color: darken(var(--primary-color), 10%);
	text-decoration: none;
}

a:hover::after {
	transform: scaleX(1);
	transform-origin: bottom left;
}

/********** 按钮 ***********/
button {
	padding: 8px 15px;
	border-radius: var(--border-radius);
	border: none;
	cursor: pointer;
	transition: all 0.3s ease;
	font-weight: 500;
	background-color: var(--primary-color);
	color: var(--bg-color);
	box-shadow: var(--box-shadow);
}

button:hover {
	opacity: 0.9;
	transform: translateY(-2px);
}

/********** 复制按钮 ***********/
.copy-button {
	right: 0;
	padding: 0.3em 0.5em;
	margin: 0 10px;
	position: absolute;
	background-color: var(--primary-color);
	color: var(--bg-color);
	font-size: 12px;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	box-shadow: var(--box-shadow);
}

/********** 折叠块 ***********/
.expand-container,
.expand-box {
	border: 1px solid var(--border-color); 
	border-radius: var(--border-radius);
	padding: 10px; 
	margin-top: 5px; 
	margin-bottom: 5px; 
	background-color: var(--bg-color);
	box-shadow: var(--box-shadow);
}
.expand-container:hover,
.expand-box:hover {
	cursor: pointer;
}

/********** 水平线 ***********/
hr {
	width:80%; 
	margin:0 auto; 
	border: 0; 
	height: 4px; 
	background-image: linear-gradient(to right, var(--primary-color), var(--secondary-color));
	box-shadow: var(--box-shadow);
}

/********** 表格 ***********/
table {
	padding: 0; 
	margin: 1rem 0; 
	width: 100%; 
	overflow: hidden;
	border-collapse: collapse;
	border-radius: var(--border-radius);
	box-shadow: var(--box-shadow);
}
table tr {
	background-color: var(--bg-color); 
	margin: 0; 
	padding: 0;
}
table td p {
	max-width: 600px; 
	word-wrap: break-word;
}
table tr th {
	border: 1px solid var(--border-color); 
	background-color: var(--text-color);
	color: var(--bg-color);
	padding: 12px 16px;
}
table tr td {
	border: 1px solid var(--border-color);
	padding: 12px 16px;
	line-height: 1.6;
}

/********** 代码 ***********/
code {
	font-size:13px; 
	font-family: var(--font-family); 
	line-height: 1.5;
}
p code {
	color: var(--error-text-color); 
	font-family: var(--font-family);
	background-color: rgba(255, 0, 51, 0.1);
	padding: 0.2em 0.4em;
	border-radius: 3px;
}
div.codehilite {
	margin: 15px 0;
	display: block; 
	word-wrap: break-word; 
	overflow: auto; 
	border: 1px solid var(--border-color); 
	border-radius: var(--border-radius);
	box-shadow: var(--box-shadow);
}
div.codehilite p {
	position: relative;
}
div.codehilite p.title {
	font-weight: bold; 
	display: block;
	color: var(--bg-color); 
	background-color: var(--text-color); 
	border-radius: var(--border-radius) var(--border-radius) 0 0; 
	margin:0; 
	padding:5px 15px;
}
div.codehilite pre {
	word-break: break-all; 
	white-space: pre-wrap; 
	padding: 0 15px 5px 15px;
}

/********** 块引用 ***********/
blockquote {
	padding-left: 10px;
	margin-left: 0; 
	margin-right: 0;
	color: var(--text-color); 
	background-color: var(--shadow-color); 
	border-left: 0.5em solid var(--primary-color); 
	position: relative; 
	line-height: 200%; 
	text-indent: 20px;
}

/********** 进度条 ***********/
.progress-label {
	color: var(--text-color); 
	position: absolute;
	text-align: center; 
	font-weight: 700;
	width: 100%; 
	margin: 0; 
	line-height: 1.2rem; 
	white-space: nowrap;
	overflow: hidden;
}
.progress-bar {
	height: 1.2rem; 
	float: left;
}
.progress {
	display: block; 
	width: 100%; 
	margin: 0.5rem 0; 
	height: 1.2rem;
	background-color: var(--bg-color); 
	position: relative;
	box-shadow: var(--box-shadow);
}
.progress.thin {
	margin-top: 0.9rem;
	height: 0.4rem;
}
.progress.thin .progress-label {
	margin-top: -0.4rem;
}
.progress.thin .progress-bar {
	height: 0.4rem;
}
.progress-100plus .progress-bar {
	background-color: var(--tip-text-color);
}
.progress-80plus .progress-bar {
	background-color: var(--note-text-color);
}
.progress-60plus .progress-bar {
	background-color: var(--warn-bg-color);
}
.progress-40plus .progress-bar {
	background-color: var(--error-bg-color);
}
.progress-20plus .progress-bar {
	background-color: var(--warn-text-color);
}
.progress-0plus .progress-bar {
	background-color: var(--error-text-color);
}

/********** 列表 ***********/
ol li::marker, ul li::marker {
	color: var(--primary-color);
	font-weight: bold;
}

.task-list-item {
	list-style: none !important;
	position: relative;
	padding-left: 28px;
	line-height: 1.7;
}
.task-list-control {
	position: absolute;
	left: 0;
	top: 5px;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	background: none !important;
}
.task-list-control input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	margin: 0;
	padding: 0;
	pointer-events: none;
}
.task-list-indicator {
	display: inline-block;
	width: 14px;
	height: 14px;
	box-shadow: var(--box-shadow);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 36 36'%3E%3C!-- Icon from Twitter Emoji by Twitter - https://creativecommons.org/licenses/by/4.0/ --%3E%3Cpath fill='%2377B255' d='M36 32a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4h28a4 4 0 0 1 4 4z'/%3E%3Cpath fill='%23FFF' d='M30 28a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h20a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
}
.task-list-control input:checked ~ .task-list-indicator {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 36 36'%3E%3C!-- Icon from Twitter Emoji by Twitter - https://creativecommons.org/licenses/by/4.0/ --%3E%3Cpath fill='%2377B255' d='M36 32a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4h28a4 4 0 0 1 4 4z'/%3E%3Cpath fill='%23FFF' d='M29.28 6.362a2.5 2.5 0 0 0-3.458.736L14.936 23.877l-5.029-4.65a2.5 2.5 0 1 0-3.394 3.671l7.209 6.666c.48.445 1.09.665 1.696.665c.673 0 1.534-.282 2.099-1.139c.332-.506 12.5-19.27 12.5-19.27a2.5 2.5 0 0 0-.737-3.458'/%3E%3C/svg%3E");
}

/********** 标签页 ***********/
.tabbed-set {
	position: relative; 
	display: flex; 
	flex-wrap: wrap; 
	margin: 1em 0;
	padding:0 15px;
	border-radius: var(--border-radius); 
	border: 1px solid var(--border-color);
	box-shadow: var(--box-shadow);
}
.tabbed-set > input {
	display: none;
}
.tabbed-set label {
	width: auto;
	padding: 0.93em 1.25em 0.78em;
	font-weight: 700;
	white-space: nowrap;
	border-bottom: 0.30rem solid transparent;
	border-top-left-radius: 0.1rem;
	border-top-right-radius: 0.1rem;
	cursor: pointer;
	transition: background-color 250ms, color 250ms;
}
.tabbed-set .tabbed-content {
	width: 100%; 
	display: none; 
}
.tabbed-set input {
	position: absolute; opacity: 0;}
.tabbed-set input:checked:nth-child(n+1) + label {
	color: var(--primary-color); 
	border-color: var(--primary-color);
}
@media screen {
	.tabbed-set input:nth-child(n+1):checked + label + .tabbed-content {
		order: 99; 
		display: block;
	}
}
@media print {
	.tabbed-content {
		display: contents;
	}
}

/********** 警告栏 ***********/
div.admonition {
	padding: 0 !important; 
	margin: 20px 0;
	background-color: var(--bg-color); 
	border: 2px solid;
	border-radius: var(--border-radius);
	box-shadow: var(--box-shadow);
}
div.admonition p {
	margin: 0.5em 1em 0.5em 1em;
	padding: 0;
}
div.admonition p a {
	color: inherit !important;
}
div.admonition div.highlight {
	margin-left: 1em; 
	margin-right: 1em;
}
div.admonition table.highlighttable {
	padding-left: 1em; 
	padding-right: 1em;
}
div.admonition table.highlighttable div.highlight {
	margin-left: 0;
	margin-right: 0;
}
div.admonition p.admonition-title {
	color: var(--text-color); 
	margin: 0; 
	padding: 0.4em 0.2em 0.5em 0.5em; 
	font-weight: bold;
	display: block;
}
div.admonition ul,
div.admonition ol {
	margin: 0.1em 0.5em 0.5em 3em; 
	padding: 0;
}
/* -- danger, error -- */
div.danger,
div.error {
	border-color: var(--error-text-color);
}
div.danger p.admonition-title,
div.error p.admonition-title {
	background-color: var(--error-bg-color); 
	border-radius: 6pt 6pt 0 0;
}
/* -- warning, caution, attention -- */
div.warning,
div.caution,
div.attention {
	border-color: var(--warn-text-color);
}
div.warning p.admonition-title,
div.caution p.admonition-title,
div.attention p.admonition-title {
	background-color: var(--warn-bg-color); 
	border-radius: 6pt 6pt 0 0;
}
/* -- note, important -- */
div.note,
div.important {
	border-color: var(--note-text-color);
}
div.note p.admonition-title,
div.important p.admonition-title {
	background-color: var(--note-bg-color); 
	border-radius: 6pt 6pt 0 0;
}
/* -- hint, tip -- */
div.hint,
div.tip {
	border-color: var(--tip-text-color);
}
div.hint p.admonition-title,
div.tip p.admonition-title {
	background-color: var(--tip-bg-color); 
	border-radius: 6pt 6pt 0 0;
}
div.danger p.admonition-title:before,
div.error p.admonition-title:before,
div.warning p.admonition-title:before,
div.caution p.admonition-title:before,
div.attention p.admonition-title:before,
div.important p.admonition-title:before,
div.note p.admonition-title:before,
div.hint p.admonition-title:before,
div.tip p.admonition-title:before {
	display: inline-block; 
	font-style: normal; 
	font-weight: normal; 
	line-height: 1; 
	-webkit-font-smoothing: antialiased; 
	-moz-osx-font-smoothing: grayscale;
}
div.danger p.admonition-title:before,
div.error p.admonition-title:before {
	height: 20px;
	width: 23px;
	background-size: 20px 20px;
	content: "";
	background-repeat: no-repeat;
	background-image: url('data:image/svg+xml; utf8, <svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="rgb(209, 71, 71)" d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"></path></svg>');
	vertical-align: -20%;
}
div.warning p.admonition-title:before,
div.caution p.admonition-title:before,
div.attention p.admonition-title:before {
	height: 20px;
	width: 23px;
	background-size: 20px 20px;
	content: "";
	background-repeat: no-repeat;
	background-image: url('data:image/svg+xml; utf8, <svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="rgb(230, 138, 0)" d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"></path></svg>');
	vertical-align: -20%;
}
div.important p.admonition-title:before,
div.note p.admonition-title:before {
	height: 20px;
	width: 23px;
	background-size: 20px 20px;
	content: "";
	background-repeat: no-repeat;
	background-image: url('data:image/svg+xml; utf8, <svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="rgb(67, 138, 254)" d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z"></path></svg>');
	vertical-align: -20%;
}
div.hint p.admonition-title:before,
div.tip p.admonition-title:before {
	height: 20px;
	width: 23px;
	background-size: 20px 20px;
	content: "";
	background-repeat: no-repeat;
	background-image: url('data:image/svg+xml; utf8, <svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512"><path fill="rgb(0, 183, 212)" d="M176 80c-52.94 0-96 43.06-96 96 0 8.84 7.16 16 16 16s16-7.16 16-16c0-35.3 28.72-64 64-64 8.84 0 16-7.16 16-16s-7.16-16-16-16zM96.06 459.17c0 3.15.93 6.22 2.68 8.84l24.51 36.84c2.97 4.46 7.97 7.14 13.32 7.14h78.85c5.36 0 10.36-2.68 13.32-7.14l24.51-36.84c1.74-2.62 2.67-5.7 2.68-8.84l.05-43.18H96.02l.04 43.18zM176 0C73.72 0 0 82.97 0 176c0 44.37 16.45 84.85 43.56 115.78 16.64 18.99 42.74 58.8 52.42 92.16v.06h48v-.12c-.01-4.77-.72-9.51-2.15-14.07-5.59-17.81-22.82-64.77-62.17-109.67-20.54-23.43-31.52-53.15-31.61-84.14-.2-73.64 59.67-128 127.95-128 70.58 0 128 57.42 128 128 0 30.97-11.24 60.85-31.65 84.14-39.11 44.61-56.42 91.47-62.1 109.46a47.507 47.507 0 0 0-2.22 14.3v.1h48v-.05c9.68-33.37 35.78-73.18 52.42-92.16C335.55 260.85 352 220.37 352 176 352 78.8 273.2 0 176 0z"></path></svg>');
	vertical-align: -20%;
}
